<template>
  <div class="page-box">
    <div class="flex-left">
      <CaiJiAnJianLiang></CaiJiAnJianLiang>
      <AnJianLeiXingZhanBi></AnJianLeiXingZhanBi>
      <ZuiXinAnJian
        :height="315"
        :scrollData="scrollData"
        :servers="0"
      ></ZuiXinAnJian>
    </div>

    <div class="anjianbili">
      <AnJianChengBanQingKuang></AnJianChengBanQingKuang>
    </div>

    <div class="flex-right">
      <BenYueAnJianShuLiang></BenYueAnJianShuLiang>
      <BanLiKaoHe></BanLiKaoHe>
      <LeiXingChengBanShangShen></LeiXingChengBanShangShen>
    </div>
  </div>
</template>

<script>
import CaiJiAnJianLiang from './components/CaiJiAnJianLiang.vue'
import AnJianChengBanQingKuang from './components/AnJianChengBanQingKuang.vue'
import AnJianLeiXingZhanBi from './components/AnJianLeiXingZhanBi.vue'
import BanLiKaoHe from './components/BanLiKaoHe.vue'
import BenYueAnJianShuLiang from './components/BenYueAnJianShuLiang.vue'
import LeiXingChengBanShangShen from './components/LeiXingChengBanShangShen.vue'
import ZuiXinAnJian from '@/components/ZuiXinAnJian/ZuiXinAnJian.vue'
import { HomeDb } from '@/api'
export default {
  components: {
    CaiJiAnJianLiang,
    AnJianChengBanQingKuang,
    AnJianLeiXingZhanBi,
    BanLiKaoHe,
    BenYueAnJianShuLiang,
    LeiXingChengBanShangShen,
    ZuiXinAnJian
  },
  data() {
    return {
      scrollData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      // 0-首页
      HomeDb.getNewOrder().then(res => {
        this.scrollData = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.anjianbili {
  // width: 808px;
  width: calc(100% - 531px - 570px);
  // height: auto;
  height: 355px;
  left: 550px;
  // right: 550px;
  bottom: 0;
  // background: url('../../assets/images/layout/middle.png') no-repeat;
  background-image: url('../../assets/images/layout/middle.png');
  background-size: 100% 100% !important;
  // background-size: 100% 100%;
}
</style>
